<template>
  <div>
    <Header goback="true" headerTitle="搜索"></Header>
    <div class="outer-scroll">
      <div class="search-content">
        <div class="search-text-btn">
          <el-input
            placeholder="请输入内容"
            v-model="searchText"
            clearable
            :class="{ itemText, changeText }"
            @input="changeInput"
          >
          </el-input>

          <el-button type="primary" @click="onSubmit()" class="itembtn"
            >提交</el-button
          >
        </div>
        <div
          class="search-history"
          v-if="history && historyList && historyList.length > 0"
        >
          <p class="history-title">搜索历史</p>
          <section class="history-list">
            <ul>
              <li v-for="hitem in historyList" @click="onSubmit(hitem.value)">
                <span class="history-list-name">{{ hitem.value }}</span>
                <span class="iconfont icon-shanchu"></span>
              </li>
            </ul>
          </section>
          <p class="clear-history" @click="deHistory">清除搜索历史</p>
        </div>
        <div class="goods" v-if="goods">
          <div class="goods-list" v-if="goodsList && goodsList.length > 0">
            <p class="list-title">商家</p>
            <section class="lists">
              <ul>
                <li v-for="item in goodsList">
                  <router-link
                    :to="{ path: '/shop', query: { id: item.id, geohash } }"
                    class="items"
                  >
                    <div class="item-img">
                      <img :src="item.image_path" alt="" />
                    </div>
                    <div class="item-content">
                      <p>
                        {{ item.name }}
                        <span :class="item.logoClass"></span>
                      </p>
                      <span>月售 {{ item.recent_order_num }} 单</span>
                      <div>
                        <span>{{ item.float_minimum_order_amount }} /</span>
                        <span>距离{{ item.distance }}</span>
                      </div>
                    </div>
                  </router-link>
                </li>
              </ul>
            </section>
          </div>
          <div class="goods-none" v-else>
            <p class="sorry-none">很抱歉，无搜索结果</p>
          </div>
        </div>
      </div>
    </div>

    <footer-guide></footer-guide>
  </div>
</template>

<script>
import Header from "Components/header/header";
import footerGuide from "Components/footer/footGuide";
import { searchRestaurant } from "@/service/getData.js";
import { setStore, getStore, imageStabilization } from "@/config/utils.js";
import { imgBaseUrl } from "@/config/env.js";
export default {
  data() {
    return {
      searchText: "",
      itemText: "itemText",
      changeText: true,
      clearTimeNum: 0,
      history: true,
      goodsList: "",
      goods: false,
      geohash: "",
      // 搜索历史列表
      historyList: [],
    };
  },
  components: { Header, footerGuide },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let geohash = JSON.parse(getStore("geohash"));
      if (geohash) {
        this.geohash = geohash.geohash;
      } else {
        alert("请先选择需要搜索的城市");
        this.$router.push("/home");
        return;
      }

      this.gHistory();
    },
    // 点击搜索
    onSubmit(hvalue = undefined) {
      this.searchText = hvalue || this.searchText;
      this.findText();
    },
    // 自动检索
    changeInput() {
      this.searchCommon();
    },
    // 检索公告模块
    searchCommon() {
      let searchText = this.searchText.trim();
      // 删除所有输入数据,显示历史记录
      if (searchText == "") {
        this.goods = false;
        this.gHistory();
        this.history = true;
      }
      this.initBb();
    },
    // 获取搜索历史记录
    gHistory() {
      let historyList = JSON.parse(getStore("historyList"));
      if (historyList) {
        this.historyList = historyList;
      }
    },
    initBb: imageStabilization(function () {
      this.findText();
    }, 1000),
    // 具体的业务处理流程
    async findText() {
      // 数据为空，不搜索
      console.log(this.searchText);
      let searchText = this.searchText.trim();
      if (searchText.length == 0) {
        return;
      }
      // 保存搜索记录
      let historyKey = getStore("historyList");
      if (historyKey) {
        let historyList = JSON.parse(historyKey);
        let flag = false;
        historyList.forEach((item) => {
          if (item.value == searchText) {
            flag = true;
            return;
          }
        });
        if (!flag) {
          historyList.push({ value: searchText });
          setStore("historyList", historyList);
        }
      } else {
        setStore("historyList", [{ value: searchText }]);
      }
      // 调用查询接口
      // params (地址经纬度，查询文本)
      let res = await searchRestaurant(this.geohash, searchText);
      this.history = false;
      let arrList = [...res];
      // 获取数据为空
      if (arrList.length <= 0) {
        this.goods = true;
        return;
      }

      console.log(res);
      // 图片路径拼接
      arrList.forEach((item) => {
        let { image_path } = item;
        if (image_path) {
          if (/^\w+http+\w+$/.test(image_path)) {
            // 问题图片暂不处理
          } else {
            item.image_path = `/api${imgBaseUrl}${image_path}`;
          }
        }
      });
      this.goodsList = arrList;
      this.goods = true;
    },
    // 删除历史记录
    deHistory() {
      setStore("historyList", []);
      this.gHistory();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.search-content {
  // @include wh(100%, 2.5rem);
  position: relative;
  .search-text-btn {
    padding: 0.5rem 0;
    background: white;
    display: flex;
  }
}

.itemText {
  flex: 4;
  margin: 0 0.5rem;
}

.itembtn {
  flex: 1;
  margin-right: 0.5rem;

  span {
    color: white;
  }
}
.history-title {
  @include wh(100%, 2rem);
  line-height: 2rem;
  margin-left: 0.5rem;
  @include sc(0.6rem, #666);
  font-weight: 800;
}
.history-list {
  background: white;
  ul {
    li {
      display: block;
      @include fj();
      align-items: center;
      @include wh(100%, 2.3rem);
      padding: 0 0.25rem;
      border-bottom: 0.1rem #f5f5f5 solid;
      .history-list-name {
        @include sc(0.65rem, black);
        font-weight: normal;
      }
      span {
        font-weight: 1000;
        @include sc(0.75rem, rgb(153, 153, 153));
      }
    }
  }
}
.clear-history {
  @include wh(100%, 2.1rem);
  line-height: 2.1rem;
  text-align: center;
  background: white;
  @include sc(0.75rem, $blue);
  font-weight: 600;
}

.goods-list {
  .list-title {
    font-size: 0.6rem;
    @extend .history-title;
  }
}
.lists ul li:first-child .items {
  border-top: none;
}

.items {
  background: white;
  border-top: 0.008rem solid #e4e4e4;
  padding-bottom: 0.8rem;
  display: flex;
  @include sc(0.55rem, black);
  .item-img {
    margin: 0.3rem 0 0 0.3rem;
    img {
      @include wh(1.7rem, 1.7rem);
    }
  }
  .item-content {
    flex: 1;
    padding: 0.4rem 0;
    margin-left: 0.45rem;
    margin-right: 0.4rem;
    border-bottom: 0.008rem solid #e4e4e4;
  }
}
.sorry-none {
  margin-top: 0.2rem;
  @include wh(100%, 1.5rem);
  line-height: 1.5rem;
  text-align: center;
  @include sc(0.55rem, black);
  background: white;
}
//修改elementUI  input 样式
// .itemText {
//   /deep/ .el-input__inner {
//     height: 1.5rem;
//   }
// }

.itembtn {
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 0.2rem;
  background: $blue;
  /deep/ span {
    @include sc(0.7rem, white);
    font-weight: 550;
    // color: white;
  }
}
</style>
<style lang="scss">
// .itembtn {
//   height: 1.5rem;
//   line-height: 1.5rem;
//   padding: 0 0.2rem;
//   background: #3190e8;
//   span {
//     font-size: 0.7rem;
//     color: white;
//     font-weight: 550;
//     // color: white;
//   }
// }
//
//
.itemText {
  .el-input__inner {
    height: 1.5rem;
  }
  .el-input__inner:focus {
    // outline: none;

    border: 0.05rem solid #dcdfe6;
  }
}
</style>
